import BasicMapUtils from './BasicMapUtils'

const ol = window.ol
const faceMapData = [
  // 一个对象是一个线路
  {
    path: [
      {
        name: '南湖公园',
        lng: 108.342842,
        lat: 22.810566,
        marker: {
          userData: {
            title: '1',
            id: '2',
            name: '张三'
          },
          icon: require('assets/images/situational-awareness/renlianyujing-map-icon.png')
        }
      },
      { name: '星湖路北二里', lng: 108.339364, lat: 22.810027 },
      { name: '星湖路北一里', lng: 108.335526, lat: 22.809509 },
      { name: '七星古城路口', lng: 108.330907, lat: 22.809406 },
      { name: '新民七星路口', lng: 108.324972, lat: 22.811504 },
      {
        name: '新民东葛路口',
        lng: 108.324515,
        lat: 22.818723
      },
      { name: '新民民主路口', lng: 108.324159, lat: 22.822535 },
      {
        name: '工人文化宫站',
        lng: 108.318715,
        lat: 22.822746,
        marker: {
          userData: {
            title: '1',
            id: '2',
            name: '张三'
          },
          icon: require('assets/images/situational-awareness/renlianyujing-map-icon.png')
        }
      },
      { name: '人民朝阳路口', lng: 108.314786, lat: 22.821154 },
      { name: '人民解放路口', lng: 108.310098, lat: 22.819045 },
      { name: '人民永宁路口', lng: 108.307876, lat: 22.818096 },
      { name: '新阳路水街市场', lng: 108.304838, lat: 22.817881 },
      { name: '新阳北大路口', lng: 108.301434, lat: 22.818904 },
      { name: '新阳立交', lng: 108.297281, lat: 22.819445 },
      { name: '龙腾路口', lng: 108.291441, lat: 22.819996 },
      { name: '龙腾新阳路口', lng: 108.290971, lat: 22.817136 },
      { name: '龙腾江北路口', lng: 108.28944, lat: 22.811799 },
      { name: '雅里', lng: 108.28793, lat: 22.810503 },
      { name: '雅里上坡', lng: 108.284853, lat: 22.809851 },
      { name: '永和村', lng: 108.281643, lat: 22.812574 },
      { name: '中兴桥北1', lng: 108.279905, lat: 22.814589 },
      { name: '新阳明秀路口', lng: 108.28126, lat: 22.821193 },
      { name: '市三医院', lng: 108.278668, lat: 22.823257 },
      {
        name: '新阳站',
        lng: 108.274727,
        lat: 22.824555,
        marker: {
          userData: {
            title: '1',
            id: '2',
            name: '张三'
          },
          icon: require('assets/images/situational-awareness/renlianyujing-map-icon.png')
        }
      }
    ]
  },
  {
    path: [
      { name: '江南客运站', lng: 108.308622, lat: 22.768183 },
      { name: '南宁经济开发区', lng: 108.307453, lat: 22.772862 },
      { name: '南国花园', lng: 108.315091, lat: 22.782992 },
      { name: '白沙亭江路口', lng: 108.322449, lat: 22.786539 },
      { name: '白沙市场', lng: 108.327554, lat: 22.788203 },
      { name: '白沙桥南', lng: 108.329402, lat: 22.789354 },
      { name: '新兴苑', lng: 108.352969, lat: 22.797041 },
      { name: '竹溪青山路口', lng: 108.359338, lat: 22.799865 },
      { name: '市环保局', lng: 108.362609, lat: 22.801601 },
      { name: '竹溪立交', lng: 108.374785, lat: 22.814403 },
      { name: '长虹厢竹路口站', lng: 108.374873, lat: 22.845523 },
      { name: '长虹翠竹路口西站', lng: 108.382676, lat: 22.847537 },
      { name: '长虹翠竹路口东站', lng: 108.389634, lat: 22.850387 },
      { name: '长虹凤凰岭路口站', lng: 108.397789, lat: 22.850341 },
      { name: '长虹站北三支路口', lng: 108.409302, lat: 22.849391 },
      { name: '长虹高坡岭路口', lng: 108.427188, lat: 22.851434 },
      { name: '长虹三塘南路口', lng: 108.427188, lat: 22.851434 },
      { name: '松柏长虹路口', lng: 108.433971, lat: 22.852208 },
      { name: '南宁农产品交易中心', lng: 108.434988, lat: 22.850197 }
    ]
  }
]

class FaceEarlyWarning extends BasicMapUtils {
  constructor() {
    super()
    this.initAll()
  }
  async initAll() {
    this.faceMapData = faceMapData
    this.lineArrGeometry = []
    this.overlay = ''
    this.siteOverlay = ''
    this.carOverlay = ''
    this.onClickEvent()
    await this.coordinateDrawLineMethod()
    // await this.moveMethod()
    this.mapView.animate({ zoom: 14 })
  }
  // 监听事件
  onClickEvent() {
    let overlay = ''
    this.map.on('click', e => {
      const feature = this.map.forEachFeatureAtPixel(e.pixel, feature => {
        return feature
      })
      overlay && overlay.setPosition(undefined)
      if (feature) {
        if (feature.get('userData').type === 'marker') {
          this.position = e.coordinate
          if (this.siteOverlay) {
            this.siteOverlay.setPosition(undefined)
          } else if (this.carOverlay) {
            this.carOverlay.setPosition(undefined)
          }
          overlay = this.addOverlay('.warning-detail-pop')
        }
      } else {
        this.siteOverlay && this.siteOverlay.setPosition(undefined)
        this.carOverlay && this.carOverlay.setPosition(undefined)
        this.overlay && this.overlay.setPosition(undefined)
      }
    })
  }
  // 转坐标的方法
  coordinateDrawLineMethod() {
    this.faceMapData.forEach(item => {
      item.path.forEach(value => {
        const [x, y] = this.coordTransform.wgs84tobd09(value.lng, value.lat)
        value.lng = x
        value.lat = y
      })
    })
  }
  moveMethod() {
    this.faceMapData.forEach((item, itemIndex) => {
      this.drawRouteLine(item, itemIndex)
    })
  }
  /* 点线实时更新 */
  drawRouteLine(value, itemIndex) {
    let interval = null // 定时器对象
    let index = -1 // 拿索引值
    const route = [] // 线路坐标点
    let markerCenter = []
    let userData = {}
    let icon = ''
    const routeLength = value.path.length // 线路总长
    const drowLine = () => {
      const riverLineString = new ol.geom.LineString(route)
      // 百度转墨卡托
      this.coordTransform.convertGeoIntoMap(riverLineString)
      const lineParams = {
        lineArr: riverLineString.getCoordinates(),
        color: '#EFD000',
        width: 3
      }
      const lineObject = this.createLine({ ...lineParams })
      // this.lineGeometry = lineObject.lineGeometry
      this.lineArrGeometry[itemIndex] = lineObject.lineGeometry
      this.lineFeature = lineObject.lineFeature
      this.lineLayer = lineObject.lineLayer
      this.map.addLayer(this.lineLayer)
    }
    // 定时器开始
    interval = setInterval(() => {
      index += 1
      if (index >= routeLength) {
        // 拿完点就清空定时器
        clearInterval(interval)
        return
      }
      const data = value.path.slice(index, index + 1)
      route.push([data[0].lng, data[0].lat])
      if (data[0].marker) {
        userData = data[0].marker.userData
        icon = data[0].marker.icon
        markerCenter = [data[0].lng, data[0].lat]
        this.addMarker(markerCenter, icon, userData)
      }
      drowLine()
      // if (this.lineLayer) {
      //   this.map.removeLayer(this.lineLayer)
      // }
    }, 100)
  }

  addMarker(markerCenter, icon, userData) {
    const centerPoint = new ol.geom.Point(markerCenter)
    this.coordTransform.convertGeoIntoMap(centerPoint)
    const markerParams = {
      x: centerPoint.getCoordinates()[0],
      y: centerPoint.getCoordinates()[1],
      icon,
      userData: userData,
      anchor: [0.5, 1]
    }
    const markerObject = this.createMarker({ ...markerParams })
    this.markerLayer = markerObject.markerLayer
    this.map.addLayer(markerObject.markerLayer)
  }

  // 实时新增点和线
  addNewLine(params) {
    const { index, data } = params
    // 转换坐标
    const [x, y] = this.coordTransform.wgs84tobd09(data.lng, data.lat)
    data.lng = x
    data.lat = y
    const centerPoint = new ol.geom.Point([x, y])
    this.coordTransform.convertGeoIntoMap(centerPoint)
    this.lineArrGeometry[index].appendCoordinate(centerPoint.getCoordinates())
    if (data.marker) {
      this.addMarker([x, y], data.marker.icon, data.marker.userData)
    }
  }

  addOverlay(value) {
    this.overlay = this.createOverlay({
      htmlElement: document.querySelector(value),
      position: this.position
    })
    this.map.addOverlay(this.overlay)
    return this.overlay
  }
  // 修改弹框--为站点弹框
  setOverlay(value) {
    if (value === '.site-infor-pop') {
      this.overlay.setPosition(undefined)
      this.siteOverlay = this.addOverlay(value)
    } else if (value === '.car-infor-pop') {
      this.siteOverlay.setPosition(undefined)
      this.carOverlay = this.addOverlay(value)
    }
    // 关闭弹框
    // this.overlay.setElement(document.querySelector(value))
    // this.map.removeOverlay(this.overlay)
  }
}

export default FaceEarlyWarning
